<template>
  <div class="receipt-order-edit-wrapper app-container" style="margin-bottom: 60px" v-loading="loading">

    <el-card header="基本信息">
      <el-row :gutter="10">
        <el-form ref="elForm" :model="headerList" :rules="rules" size="small" type="flex" label-width="130px"
          style="padding: 10px  20px 0 20px;">
          <!-- 订单编号信息 -->
          <el-col :span="8">
            <div class="info-item">
              <span>订单编号: </span>
              <span>{{ headerList.vbillcode }}</span>
            </div>
          </el-col>
          <!-- 入库单表头主键信息 -->
          <el-col :span="8">
            <div class="info-item">
              <span>入库单表头主键: </span>
              <span>{{ headerList.cgeneralhid }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="vnote">
              <el-input v-model="headerList.vnote" placeholder="请输入备注" clearable :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>


    <el-card header="修改单据信息" class="mt10">
      <el-row :gutter="10">
        <el-form ref="elForm" :model="headerList" :rules="rules" size="small" type="flex" label-width="130px"
          style="padding: 10px  20px 0 20px;">
          <el-table :data="detailsList" border @selection-change="handleTableSelectionChange" label-position="top"
            :row-key="row => row.id">
            <!-- 选择框列 -->
            <el-table-column prop="crowno" label="行号" width="50" />
            <el-table-column label="物料信息">
              <template #default="{ row }">
                <div v-if="row.cmaterialvid">物料编码：{{ row.cmaterialvid.code }}</div>
                <div v-if="row.cmaterialvid">物料名称：{{ row.cmaterialvid.name }}</div>
                <div v-if="row.cmaterialvid">物料主键：{{ row.cmaterialvid.pk }}</div>
              </template>
            </el-table-column>
            <el-table-column label="库存信息">
              <template #default="{ row }">
                <div>
                  <span>库存状态：</span>
                  <span>{{ row.cgeneralbid }}</span>
                </div>
                <div>
                  <span>入库单表体主键：</span>
                  <span>{{ row.cgeneralbid }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="批次号">
              <template #default="{ row }">
                <el-input v-model="row.vbatchcode" placeholder="请输入批次号" type="text" clearable size="small" />
              </template>
            </el-table-column>
            <!-- 数量信息 -->
            <el-table-column label="数量信息">
              <template #default="{ row }">
                <div>
                  <span>应发主数量：</span>
                  <span>{{ row.nshouldnum }}</span>
                </div>
                <div>
                  <span>应发数量：</span>
                  <span>{{ row.nshouldassistnum }}</span>
                </div>
                <div>
                  <div>
                    <span>实发主数量：</span>
                    <el-input v-model="row.nnum" placeholder="请输入实发主数量" type="number" clearable size="small"
                      @input="calculateAssistNum(row)" />
                  </div>
                </div>
                <div>
                  <span>实发数量：</span>
                  <el-input v-model="row.nassistnum" placeholder="请输入实发数量" type="number" clearable size="small"
                    readonly />
                </div>
              </template>
            </el-table-column>
            <el-table-column type="selection" width="55" :reserve-selection="true" />
          </el-table>
          <el-form-item size="large" style="margin-top: 20px; float: right;">
            <el-button type="primary" @click="queryMaterialsOutboundUpdateList">提交</el-button>
            <!-- <el-button type="success" @click="queryPurchaseUpdate签字List">提交并签字</el-button> -->
            <!-- <el-button @click="resetForm">重置</el-button> -->
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
  </div>
</template>

<script>
// 获取wms材料出库单接口
import { getMaterialsOutboundInfo } from '@/api/supply/materialSupply.js'
// 修改NCC材料出库单接口
import { createMaterialsOutboundUpdate } from '@/api/supply/materialSupply.js'

export default {
  data() {
    return {
      loading: false, // 控制加载状态
      selectedRow: null, // 当前选中的表格行
      tableRowChecked: [], // 用于记录每行的选中状态
      headerList: {
        cgeneralhid: '', // 入库单表头主键
        vnote: '' // 备注
      },
      detailsList: [], // 商品明细信息
      rules: {
        cgeneralhid: [
          { required: true, message: '请输入入库单表头主键', trigger: 'blur' }
        ],
        vnote: [
          { required: false, message: '请输入备注', trigger: 'blur' }
        ]
      },
    }
  },
  created() {
    // 接收路由参数
    this.vbillcode = this.$route.query.vbillcode || '';
    if (!this.vbillcode) {
      this.$message.error('未收到订单编号，请返回重试！');
    }
    console.log('接收路由参数vbillcode:', this.vbillcode);
  },
  mounted() {
    this.queryMaterialsOutboundNccList();  // 获取NCC材料出库单
  },
  methods: {
    // 实收主数量与实收辅数量转换
    calculateAssistNum(row) {
      const changerateArr = row.vchangerate.split('/');
      const mainNum = parseFloat(row.nnum);
      const factor = parseFloat(changerateArr[1]) / parseFloat(changerateArr[0]);
      row.nassistnum = (mainNum * factor).toFixed(4);  // 这里保留两位小数，可按需调整
    },
    // 处理表格行选择事件
    handleTableSelectionChange(selectedRows) {
      // 根据传入的当前选中的行数据数组selectedRows，更新tableRowChecked数组来标记每行的选中状态
      // 通过map遍历detailsList中的每一行数据row，判断它是否在selectedRows中，若在则对应位置标记为true（表示选中），否则标记为false
      this.tableRowChecked = this.detailsList.map(row => selectedRows.includes(row));
      // 将当前选中的行数据整体赋值给selectedRow属性，方便在其他地方获取和使用选中行的详细数据（支持多选情况）
      this.selectedRow = selectedRows;
    },

    // 提交签字
    queryPurchaseUpdate签字List() { },
    /**
    * 查询修改NCC材料出库单
    */
    queryMaterialsOutboundUpdateList() {
      // 开启加载状态提示
      this.loading = true;

      // 直接根据tableRowChecked数组筛选出选中行数据，即获取当前在表格中被用户勾选的行数据
      const selectedRows = this.detailsList.filter((_, index) => this.tableRowChecked[index]);

      // 如果没有选中任何行，给出提示信息告知用户需要选择入库项，并关闭加载状态提示，直接返回不再继续后续操作
      if (!selectedRows.length) {
        this.$message.warning('请选择待修改的明细行');
        this.loading = false;
        return;
      }

      // 将选中行的数据进行整理，提取出需要传递给后端接口的各个字段信息，
      // 组成新的对象数组detailsData，方便后续与表头信息一起封装传递给接口
      const detailsData = selectedRows.map(row => ({
        cgeneralbid: row.cgeneralbid,
        nnum: row.nnum,
        nshouldnum: row.nshouldnum,
        vbatchcode: row.vbatchcode
      }));

      // 构建表头信息对象header，包含入库单表头主键和仓库信息等关键表头数据，用于传递给后端接口
      const header = {
        cgeneralhid: this.headerList.cgeneralhid,
        vnote: this.headerList.vnote,
      };

      // 如果表头关键信息（入库单表头主键或仓库信息）有空值，说明用户填写不完整，给出错误提示并关闭加载状态，返回不再继续接口请求操作
      if (!header.cgeneralhid || !header.vnote) {
        this.$message.error('请填写完整的表头信息');
        this.loading = false;
        return;
      }

      // 将表头信息和整理好的商品明细信息整合到一个对象combinedData中
      const combinedData = { ic_material_h: header, ic_material_b: detailsData };

      createMaterialsOutboundUpdate(combinedData)
        .then(response => {
          console.log('接口请求成功，返回response数据：', response);

          this.loading = false;

          if (response.code === 200) {
            this.$message.success(response.msg);
            this.queryMaterialsOutboundNccList();  // 获取NCC材料出库单
            this.$tab.closePage(); // 关闭当前页面的标签
          } else {
            this.$message.error('提交失败，请稍后再试');
          }
        })
        .catch(error => {
          this.loading = false;
          console.log('接口请求出错:', error);
        });
    },


    /**
    * 查询获取NCC材料出库单列表
    */
    queryMaterialsOutboundNccList() {
      this.loading = true;

      getMaterialsOutboundInfo({ vbillcode: this.vbillcode })
        .then(response => {
          console.log('接口请求成功，返回response数据：', response);
          // 假设接口返回的数据数组中第一个元素包含了我们需要的header和details等信息，先获取这个元素
          const responseData = response.rows[0];

          if (responseData) {
            this.headerList = responseData.header;

            // 对获取到的商品明细信息数据中的每个元素进行处理，添加一个唯一标识id（此处简单使用序号作为示例），
            // 然后赋值给detailsList属性，方便表格组件正确识别每行数据以及后续可能的操作关联
            this.detailsList = responseData.details.map((detail, index) => ({ ...detail, id: index + 1 }));

          } else {
            this.$message.error('没有找到相关数据');
          }
          this.loading = false;
          // 关闭加载状态提示，数据获取完成
        })
        .catch(() => {
          this.loading = false;
          // this.$message.error('采购订单数据加载失败');
        });
    },

    resetForm() {
      this.$refs.elForm.resetFields();
    }
  }
}
</script>

<style scoped></style>
